<template>
   <div class="wrap" :style="{minHeight:$store.state.minHeight+'rem'}">
      <myHead title="提现进度"></myHead>
      <div class="head">
         <div class="headtop">
            <p>零钱提现-到工商银行（2568）</p>
            <p>-200.00</p>
            <p>交易成功</p>
         </div>
         <div class="speed">
            <div class="speed-top">
               <div class="speed-line" :style="{width:'calc(2.28rem / 1.25)'}"></div>
               <img src="../../../static/img/wc.png" alt="" class="dh1" v-show="state[0]">
               <img src="../../../static/img/wc.png" alt="" class="dh2" v-show="state[1]">
               <img src="../../../static/img/wc.png" alt="" class="dh3" v-show="state[2]">
               <p class="p1"></p>
               <p class="p2"></p>
               <p class="p3"></p>
               <div :class="state[0]?'state1 state stated':'state1 state'">
                  <p>发起提现&emsp;&ensp;</p>
                  <p>03-01 12:00:36</p>
               </div>
               <div :class="state[1]?'state2 state stated':'state2 state'">
                  <p>银行处理中</p>
                  <p>03-01 12:00:36</p>
               </div>
               <div :class="state[2]?'state3 state stated':'state3 state'">
                  <p>&emsp;&emsp;&emsp;到账&emsp;</p>
                  <p>03-01 12:00:36</p>
               </div>
            </div>
         </div>
         <div class="infoList">
            <div class="info-item">
               <p>提现金额</p>
               <p>￥200</p>
            </div>
            <div class="info-item">
               <p>服务费</p>
               <p>￥0.20</p>
            </div>
            <div class="info-item">
               <p>申请时间</p>
               <p>2019-4-12 12:28</p>
            </div>
            <div class="info-item">
               <p>到账时间</p>
               <p>2019-4-12 12:28</p>
            </div>
            <div class="info-item">
               <p>提现银行</p>
               <p>工商银行</p>
            </div>
            <div class="info-item">
               <p>交易单号</p>
               <p>20191234564789456123015564445455</p>
            </div>
            <div class="info-item">
               <p>提现单号</p>
               <p>20191234564789456123015564445455</p>
            </div>
         </div>
      </div>
      <div class="kf" @click="problem">
         <p>对此账单有疑问联系客服？</p>
         <img src="../../../static/img/youjiantou003.png" alt="">
      </div>
   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead"

    export default {
        name: "extensionWithdrawalProgress",
        components: {
            myHead
        },
        data(){
            return{
                state:[true,true,false],

            }
        },
        methods:{
            problem(){
                this.$router.push({
                    name:'problem'
                })
            }
        }
    }
</script>

<style scoped>
   .wrap {
      padding-top: .5rem;
      box-sizing: border-box;
      background-color: #F5F5F5;
   }
   .head {
      padding:.15rem;
      background-color: #FFFFFF;
      margin-bottom: .1rem;
   }
   .headtop {
      height: .95rem;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      border-bottom: .01rem solid #F5F5F5;
      padding-bottom: .1rem;
   }
   .headtop>p:nth-child(1) {
      font-size:.14rem;
      font-family:inpin heiti;
      font-weight:400;
      color: #070303;
   }
   .headtop>p:nth-child(2) {
      font-size:.3rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #120A13;
   }
   .headtop>p:nth-child(3) {
      font-size:.14rem;
      font-family:inpin heiti;
      font-weight:400;
      color: #D3D3D3;
   }

   .speed {
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: space-around;
      height: .8rem;
      margin-bottom: .3rem;
   }
   .speed-top {
      width: 2.28rem;
      height: .03rem;
      background-color: #E5E5E5;
      border-radius: .01rem;
      position: relative;
   }
   .speed-line {
      height: 100%;
      background-color: #FF6F01;
      border-radius: .01rem;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
   }
   .dh1,.dh2,.dh3 {
      width: .2rem;
      height: .2rem;
      position: absolute;
      top: calc(50% - .1rem);
      z-index: 8;
   }
   .p1,.p2,.p3 {
      width: .1rem;
      height: .1rem;
      position: absolute;
      top: calc(50% - .05rem);
      z-index: 5;
      border-radius: 50%;
      background-color: #E5E5E5;
   }
   .state1,.state2,.state3 {
      display: flex;
      flex-flow: column;
      align-items: center;
      position: absolute;
      bottom: -.5rem;
      z-index: 5;
      width: .9rem;
      text-align: center;
   }
   .state>p {
      width: 100%;
      text-align: center;
   }
   .state>p:nth-child(1) {
      font-size:.13rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #666666;
   }
   .state>p:nth-child(2) {
      font-size:.12rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #999999;
   }
   .state1 {
      left: -.45rem;
   }
   .state2 {
      left: calc(50% - .45rem);
   }
   .state3 {
      right: -.45rem;
   }
   .dh1 {
      left:-.2rem;
   }
   .dh2 {
      left: calc(50% - .1rem);
   }
   .dh3 {
      right: -.2rem;
   }
   .p1 {
      left:-.1rem;
   }
   .p2 {
      left:calc(50% - .05rem);
   }
   .p3 {
      right: -.1rem;
   }
   .stated>p {
      color: #FF6F01 !important;
   }

   .info-item {
      height: .35rem;
      display: flex;
      flex-flow: row;
      align-items: center;
   }
   .info-item>p:nth-child(1) {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #999999;
      width: .6rem;
      margin-right: .15rem;
   }
   .info-item>p:nth-child(2) {
      font-size:.13rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #333333;
   }

   .kf {
      height: .6rem;
      background-color: #FFFFFF;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      padding: 0 .15rem;
   }
   .kf>p {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #333333;
   }
   .kf>img {
      width: .07rem;
      height: .12rem;
   }
</style>